<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- 配置Tailwind主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        success: '#00B42A',
                        danger: '#F53F3F',
                        warning: '#FF7D00',
                        info: '#86909C',
                        light: '#F2F3F5',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/30 focus:border-primary;
            }
        }
    </style>

    <style>
        /* 基础样式 */
        body {
            background-color: #f8fafc;
            background-image:
                    radial-gradient(circle at 25px 25px, rgba(22, 93, 255, 0.05) 2%, transparent 0%),
                    radial-gradient(circle at 75px 75px, rgba(22, 93, 255, 0.05) 2%, transparent 0%);
            background-size: 100px 100px;
        }

        /* 表单切换动画 */
        .tab-content {
            transition: all 0.3s ease-in-out;
        }

        /* 按钮动画效果 */
        .btn-hover {
            transition: all 0.2s ease-in-out;
        }

        .btn-hover:hover {
            transform: translateY(-2px);
        }

        /* 错误消息动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .error-message {
            animation: fadeIn 0.3s ease-out forwards;
        }
    </style>
</head>
<body class="font-inter min-h-screen flex flex-col">
<!-- 导航栏 -->
<nav class="bg-white shadow-sm sticky top-0 z-10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex items-center">
                <i class="fa fa-shield text-primary text-2xl mr-2"></i>
                <span class="text-lg font-semibold text-dark">电影购票系统</span>
            </div>
            <div class="flex items-center">
                <a href="#" class="text-info hover:text-primary px-3 py-2 text-sm font-medium transition-colors">
                    <i class="fa fa-question-circle mr-1"></i> 帮助
                </a>
            </div>
        </div>
    </div>
</nav>

<!-- 主要内容 -->
<main class="flex-grow flex items-center justify-center p-4 sm:p-6 lg:p-8">
    <div class="w-full max-w-md">
        <!-- 标题和描述 -->
        <div class="text-center mb-8">
            <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-2">欢迎回来</h1>
            <p class="text-info text-lg">请选择登录方式或注册新账号</p>
        </div>

        <!-- 错误消息 -->
        <div id="errorMessage" class="hidden error-message bg-danger/10 text-danger p-3 rounded-lg mb-4 flex items-center">
            <i class="fa fa-exclamation-circle mr-2"></i>
            <span></span>
        </div>

        <!-- 选项卡切换 -->
        <div class="flex border-b border-gray-200 mb-6">
            <button id="userLoginTab" onclick="showTab('userLogin')" class="flex-1 py-4 px-4 text-lg font-medium text-primary border-b-2 border-primary">
                <i class="fa fa-user-circle mr-2"></i>用户登录
            </button>
            <button id="adminLoginTab" onclick="showTab('adminLogin')" class="flex-1 py-4 px-4 text-lg font-medium text-info hover:text-primary border-b-2 border-transparent">
                <i class="fa fa-lock mr-2"></i>管理员登录
            </button>
            <button id="userRegisterTab" onclick="showTab('userRegister')" class="flex-1 py-4 px-4 text-lg font-medium text-info hover:text-primary border-b-2 border-transparent">
                <i class="fa fa-user-plus mr-2"></i>用户注册
            </button>
        </div>

        <!-- 表单容器 -->
        <div class="bg-white rounded-xl shadow-lg p-6 sm:p-8 card-shadow">
            <!-- 用户登录表单 -->
            <div id="userLogin" class="tab-content">
                <form id="userLoginForm" th:action="@{/user/login}" method="post">
                    <div class="mb-4">
                        <label for="loginType" class="block text-sm font-medium text-gray-700 mb-1">登录方式</label>
                        <div class="relative">
                            <select id="loginType" name="loginType" class="w-full rounded-lg border-gray-300 shadow-sm input-focus block py-2.5 px-4 border text-gray-700 focus:outline-none">
                                <option value="phone">手机号</option>
                                <option value="email">邮箱</option>
                            </select>
                            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                <i class="fa fa-chevron-down text-gray-400"></i>
                            </div>
                        </div>
                    </div>

                    <div class="mb-4">
                        <label for="identifier" class="block text-sm font-medium text-gray-700 mb-1">手机号/邮箱</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-user text-gray-400"></i>
                            </div>
                            <input type="text" id="identifier" name="identifier" required
                                   class="w-full rounded-lg border-gray-300 shadow-sm input-focus block py-2.5 pl-10 pr-4 border text-gray-700 focus:outline-none"
                                   placeholder="请输入手机号或邮箱">
                        </div>
                    </div>

                    <div class="mb-6">
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-lock text-gray-400"></i>
                            </div>
                            <input type="password" id="password" name="password" required
                                   class="w-full rounded-lg border-gray-300 shadow-sm input-focus block py-2.5 pl-10 pr-10 border text-gray-700 focus:outline-none"
                                   placeholder="请输入密码">
                            <button type="button" id="togglePassword" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 focus:outline-none">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>

                    <div class="flex items-center justify-between mb-6">
                        <div class="flex items-center">
                            <input id="remember" name="remember" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                            <label for="remember" class="ml-2 block text-sm text-gray-700">记住我</label>
                        </div>
                        <a href="#" class="text-sm font-medium text-primary hover:text-primary/80">忘记密码?</a>
                    </div>

                    <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg shadow-sm btn-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                        <i class="fa fa-sign-in mr-2"></i>用户登录
                    </button>
                </form>
            </div>

            <!-- 管理员登录表单 -->
            <div id="adminLogin" class="tab-content hidden">
                <form id="adminLoginForm" th:action="@{/admin/login}" method="post">
                    <div class="mb-6">
                        <label for="adminUsername" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-user-circle text-gray-400"></i>
                            </div>
                            <input type="text" id="adminUsername" name="adminUsername" required
                                   class="w-full rounded-lg border-gray-300 shadow-sm input-focus block py-2.5 pl-10 pr-4 border text-gray-700 focus:outline-none"
                                   placeholder="请输入管理员用户名">
                        </div>
                    </div>

                    <div class="mb-6">
                        <label for="adminPassword" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-lock text-gray-400"></i>
                            </div>
                            <input type="password" id="adminPassword" name="adminPassword" required
                                   class="w-full rounded-lg border-gray-300 shadow-sm input-focus block py-2.5 pl-10 pr-10 border text-gray-700 focus:outline-none"
                                   placeholder="请输入管理员密码">
                            <button type="button" id="toggleAdminPassword" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 focus:outline-none">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>

                    <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg shadow-sm btn-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                        <i class="fa fa-sign-in mr-2"></i>管理员登录
                    </button>
                </form>
            </div>

            <!-- 用户注册表单 -->
            <div id="userRegister" class="tab-content hidden">
                <form id="userRegisterForm" th:action="@{/user/register}" method="post">
                    <div class="mb-4">
                        <label for="uname" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-user-plus text-gray-400"></i>
                            </div>
                            <input type="text" id="uname" name="uname" required
                                   class="w-full rounded-lg border-gray-300 shadow-sm input-focus block py-2.5 pl-10 pr-4 border text-gray-700 focus:outline-none"
                                   placeholder="请设置用户名">
                        </div>
                    </div>

                    <div class="mb-4">
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-lock text-gray-400"></i>
                            </div>
                            <input type="password" id="registerPassword" name="password" required
                                   class="w-full rounded-lg border-gray-300 shadow-sm input-focus block py-2.5 pl-10 pr-10 border text-gray-700 focus:outline-none"
                                   placeholder="请设置密码">
                            <button type="button" id="toggleRegisterPassword" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 focus:outline-none">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>

                    <div class="mb-4">
                        <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-phone text-gray-400"></i>
                            </div>
                            <input type="text" id="phone" name="phone"
                                   class="w-full rounded-lg border-gray-300 shadow-sm input-focus block py-2.5 pl-10 pr-4 border text-gray-700 focus:outline-none"
                                   placeholder="请输入手机号">
                        </div>
                    </div>

                    <div class="mb-4">
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-envelope text-gray-400"></i>
                            </div>
                            <input type="email" id="email" name="email"
                                   class="w-full rounded-lg border-gray-300 shadow-sm input-focus block py-2.5 pl-10 pr-4 border text-gray-700 focus:outline-none"
                                   placeholder="请输入邮箱">
                        </div>
                    </div>

                    <div class="mb-6">
                        <label for="address" class="block text-sm font-medium text-gray-700 mb-1">地址</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-map-marker text-gray-400"></i>
                            </div>
                            <input type="text" id="address" name="address"
                                   class="w-full rounded-lg border-gray-300 shadow-sm input-focus block py-2.5 pl-10 pr-4 border text-gray-700 focus:outline-none"
                                   placeholder="请输入地址（选填）">
                        </div>
                    </div>

                    <div class="mb-6">
                        <div class="flex items-center">
                            <input id="agreeTerms" name="agreeTerms" type="checkbox" required class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                            <label for="agreeTerms" class="ml-2 block text-sm text-gray-700">
                                我已阅读并同意<a href="#" class="text-primary hover:underline">服务条款</a>和<a href="#" class="text-primary hover:underline">隐私政策</a>
                            </label>
                        </div>
                    </div>

                    <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg shadow-sm btn-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                        <i class="fa fa-user-plus mr-2"></i>注册账号
                    </button>
                </form>
            </div>
        </div>

        <!-- 社交登录 -->
        <div class="mt-6 text-center">
            <p class="text-sm text-gray-500 mb-4">其他登录方式</p>
            <div class="flex justify-center space-x-4">
                <a href="#" class="text-gray-400 hover:text-blue-500 transition-colors">
                    <i class="fa fa-weixin text-2xl"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-blue-500 transition-colors">
                    <i class="fa fa-qq text-2xl"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-blue-500 transition-colors">
                    <i class="fa fa-weibo text-2xl"></i>
                </a>
            </div>
        </div>
    </div>
</main>

<script>
    // 显示指定选项卡
    function showTab(tabName) {
        // 隐藏所有选项卡
        document.querySelectorAll('.tab-content').forEach(tab => {
            tab.classList.add('hidden');
        });

        // 重置所有选项卡按钮样式
        document.querySelectorAll('#userLoginTab, #adminLoginTab, #userRegisterTab').forEach(button => {
            button.classList.remove('text-primary', 'border-primary');
            button.classList.add('text-info', 'border-transparent');
        });

        // 显示选中的选项卡
        document.getElementById(tabName).classList.remove('hidden');

        // 设置选中的选项卡按钮样式
        document.getElementById(`${tabName}Tab`).classList.remove('text-info', 'border-transparent');
        document.getElementById(`${tabName}Tab`).classList.add('text-primary', 'border-primary');

        // 隐藏错误消息
        hideErrorMessage();
    }

    // 显示错误消息
    function showErrorMessage(message) {
        const errorElement = document.getElementById('errorMessage');
        errorElement.querySelector('span').textContent = message;
        errorElement.classList.remove('hidden');
    }

    // 隐藏错误消息
    function hideErrorMessage() {
        document.getElementById('errorMessage').classList.add('hidden');
    }

    // 密码显示/隐藏切换
    function setupPasswordToggle(buttonId, passwordId) {
        const toggleButton = document.getElementById(buttonId);
        const passwordInput = document.getElementById(passwordId);

        toggleButton.addEventListener('click', function() {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);

            // 切换图标
            const icon = toggleButton.querySelector('i');
            if (type === 'text') {
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            } else {
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            }
        });
    }

    $(document).ready(function() {
        // 设置密码显示/隐藏切换
        setupPasswordToggle('togglePassword', 'password');
        setupPasswordToggle('toggleAdminPassword', 'adminPassword');
        setupPasswordToggle('toggleRegisterPassword', 'registerPassword');

        // 用户登录表单提交
        $('#userLoginForm').on('submit', function(e) {
            e.preventDefault();
            hideErrorMessage();

            var formData = $(this).serialize();

            $.ajax({
                url: '/user/login',
                type: 'POST',
                data: formData,
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        // 登录成功，跳转到成功页面并携带用户名
                        window.location.href = response.redirectUrl + '?username=' + response.username;
                    } else {
                        // 登录失败，显示错误信息
                        showErrorMessage(response.error || '登录失败，请检查您的输入');
                    }
                },
                error: function() {
                    showErrorMessage('请求出错，请稍后重试');
                }
            });
        });

        // 管理员登录表单提交
        $('#adminLoginForm').on('submit', function(e) {
            e.preventDefault();
            hideErrorMessage();

            var formData = $(this).serialize();

            $.ajax({
                url: '/admin/login',
                type: 'POST',
                data: formData,
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        // 登录成功，跳转到成功页面并携带用户名和所有用户信息
                        var allUsers = encodeURIComponent(JSON.stringify(response.allUsers));
                        window.location.href = response.redirectUrl + '?username=' + response.username + '&allUsers=' + allUsers;
                    } else {
                        // 登录失败，显示错误信息
                        showErrorMessage(response.error || '登录失败，请检查您的输入');
                    }
                },
                error: function() {
                    showErrorMessage('请求出错，请稍后重试');
                }
            });
        });

        // 用户注册表单提交
        $('#userRegisterForm').on('submit', function(e) {
            e.preventDefault();
            hideErrorMessage();

            var formData = $(this).serializeArray();
            var jsonData = {};
            $.each(formData, function() {
                jsonData[this.name] = this.value;
            });

            $.ajax({
                url: '/user/register',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(jsonData),
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        alert(response.message);
                        // 修改为使用控制器的映射路径
                        window.location.href = '/login';
                    } else {
                        showErrorMessage(response.message || '注册失败，请检查您的输入');
                    }
                },
                error: function() {
                    showErrorMessage('请求出错，请稍后重试');
                }
            });
        });
    });
</script>
</body>
</html>